<template>
  <div class="category">
      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
            >新增</el-button>
         </el-col>
         <!-- <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleUpdate"
               v-hasPermi="['system:role:edit']"
            >修改</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['system:role:remove']"
            >删除</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-hasPermi="['system:role:export']"
            >导出</el-button>
         </el-col> -->
      </el-row>

      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="roleList">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="类目id" prop="cid" />
         <el-table-column label="类目" prop="label" :show-overflow-tooltip="true" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="修改" placement="top" >
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top" >
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" ></el-button>
              </el-tooltip>
            </template>
         </el-table-column>
      </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.page"
         v-model:limit="queryParams.limit"
         @pagination="getList"
      />

      <!-- 添加或修改角色配置对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
         <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="菜品类目" prop="category">
               <el-input v-model="form.category" placeholder="请输入菜品类目名称" />
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { addCategory, categoryList, updateCategory } from "@/api/shop/shopinfor";
const { proxy } = getCurrentInstance();
const roleList = ref([]);
const open = ref(false);
const loading = ref(true);
const title = ref("");
const total = ref(0);
const form = ref({
    category:''
});
const rules = ref({
    category: [{ required: true, message: "菜品类目名称不能为空", trigger: "blur" }],
});
const queryParams = ref({
    page: 1,
    limit: 10,
})


onMounted(() => {
  getList();
});


// 修改类目
const handleUpdate = (row) => {
  title.value = "修改类目";
  form.value = {
    category: row.value,
    id: row._id,
  };
  open.value = true;
};

/** 添加类目 */
function handleAdd() {
  open.value = true;
  title.value = "添加类目";
}

/** 查询类目列表 */
const getList = async () => {
  loading.value = true;
  const res = await categoryList(queryParams.value);
  const { data, code } = res
  if(code === 200) {
    const { list, } = data
    roleList.value = list;
    total.value = data.total;
    loading.value = false
  }else {
    proxy.$modal.msgError('获取类目列表失败')
  }
}


/** 提交按钮 */
function submitForm() {
  proxy.$refs["roleRef"].validate(valid => {
    if (valid) {
        if(title.value === '添加类目') {
            addCategory(form.value).then(response => {
                proxy.$modal.msgSuccess("新增成功");
                open.value = false;
                getList();
            });

        }else {
            updateCategory(form.value).then(response => {
                proxy.$modal.msgSuccess("修改成功");
                open.value = false;
                getList();
            });
        }
    }
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 重置新增的表单以及其他数据  */
function reset() {
  form.value = {
    category:''
  };
  proxy.resetForm("roleRef");
}
</script>

<style lang='scss' scoped>
.category {
    padding: 20px;
}

</style>